<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>产品管理</title>
<link rel="stylesheet" type="text/css" href="../layui/css/layui.css" />
<script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>


	<!--返回首页的导航  -->

	<a href="../HomeServlet?method=toIndex">返回首页</a>

	<table id="demo" lay-filter="test"></table>
	<!--头部工具栏  -->
	<script type="text/html" id="toolbarDemo1">
       <div class="layui-btn-container">
          <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
       </div>
</script>
	<!-- 行内工具栏 -->
	<script type="text/html" id="toolbarDemo2">
       <div class="layui-btn-container">
          <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
          <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
       </div>
</script>
	<!-- 添加表单 -->

	<div id="addDiv" style="display: none;">
		<form class="layui-form" action="">
			<div class="layui-form-item">
				<label class="layui-form-label">系列</label>
				<div class="layui-input-inline">
					<input type="text" name="typeName" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">系列id</label>
				<div class="layui-input-inline">
					<input type="text" name="productTypeId" required
						lay-verify="required" placeholder="请输入标题" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
	<!-- 编辑信息 -->
	<div id="complieDiv" style="display: none;">
		<form class="layui-form" action="" lay-filter="updateform">
			<div class="layui-form-item">
				<label class="layui-form-label">ID</label>
				<div class="layui-input-inline">
					<input type="text" name="typeId" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off"
						class="layui-input layui-disabled">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">系列</label>
				<div class="layui-input-inline">
					<input type="text" name="typeName" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="formDemo1">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
	<script>
		layui.use([ 'table', 'form', 'layer', 'upload' ], function() {
			var table = layui.table;
			var form = layui.form;
			var layer = layui.layer;
			var $ = layui.$;
			var upload = layui.upload;

			//第一个实例
			table.render({
				elem : '#demo',
				url : 'ChanPinTypeServlet?method=getprotype' //数据接口
				,
				page : true //开启分页
				,
				toolbar : '#toolbarDemo1',
				id : "idTest",
				cols : [ [ //表头
				{
					field : 'typeId',
					title : 'ID',
					width : 80,
					sort : true,
					fixed : 'left'
				}, {
					field : 'typeName',
					title : '系列名',
					width : 180
				}, {
					field : 'productTypeId',
					title : '系列id',
					width : 80
				}, {
					field : 'sPrce',
					title : '操作',
					toolbar : '#toolbarDemo2',
					width : 180
				} ] ]
			});//表单渲染结束

			//监听事件,头部监听
			table.on('toolbar(test)', function(obj) {
				switch (obj.event) {
				case 'add':
					layer.open({
						type : 1,
						area : [ '500px', '600px' ],
						content : $('#addDiv')
					//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
					});
					break;
				}
				;
			});
			//监听事件，行内监听
			table.on('tool(test)', function(obj) {
				var data = obj.data;
				switch (obj.event) {
				case 'delete':
					layer.msg('删除');
					layer.confirm('真的删除行么' + data.typeId, function(index) {

						//向服务端发送删除指令
						$.post("ChanPinTypeServlet?method=deleteprotype", {
							"typeId" : data.typeId
						}, function(res) {
							if (res.code == 0) {
								obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
								layer.close(index);
							}
							layer.msg(res.msg);
						}, "json")
					});
					break;
				case 'update':
					layer.open({
						type : 1,
						area : [ '500px', '600px' ],
						content : $('#complieDiv')
					//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
					});
					form.val("updateform", data)
					break;
				}
				;
			});
			//监听表单-添加
			form.on('submit(formDemo)', function(data) {
				$.post("ChanPinTypeServlet?method=insertprotype", data.field,
						function(res) {
							if (res.code == 0) {
								layer.msg(res.msg, {
									time : 1000
								}, function() {
									layer.closeAll();//成功后关闭
									table.reload('idTest', {});//表格重载
								})
							}

						}, "json")
				return false;
			});

			//监听表单-编辑
			form.on('submit(formDemo1)', function(data) {

				$.post("ChanPinTypeServlet?method=updateprotype", data.field,
						function(res) {
							if (res.code == 0) {
								layer.msg(res.msg, {
									time : 1000
								}, function() {
									layer.closeAll();//成功后关闭
									table.reload('idTest', {});//表格重载
								})
							}
						}, "json")
				return false;
			});

		});//结束
	</script>

</body>
</html>
